import React,{ useState, useEffect } from "react";
import './style.css'

const ScrollToTopButton = () => {
  const [showButton, setShowButton] = useState(false);
  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
    console.log(1111);
    
  };

  useEffect(() => {
    console.log(33333333,window.scrollY)
    const handleScroll = () => {
      console.log(2222);
      
      if (window.scrollY >100) { // 根据实际情况调整阈值
        setShowButton(true);
      } else {
        setShowButton(false);
      }
    };

    document.addEventListener('scroll', handleScroll);

    // 清理事件监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  const buttonStyle = {
    position: "fixed",
    bottom: "100px",
    right: "25px",
    padding: "10px 20px",
    fontSize: "16px",
    backgroundColor: "#fff",
    color: "#666",
    border: "3px solid #ccc",
    borderRadius: "50%",
    cursor: "pointer",
    display: showButton ? 'block' : 'none',
    height:'60px',
    zIndex: '1000',
    fontWeight: '900',

    // borderRadius: '50%'
  };
   
  return (
    <div>
      <button className="totop">
        ?
      </button>
      <button onClick={scrollToTop} style={buttonStyle} className="totopaa">
      ↑
    </button>
    </div>
  );
};

// 简单的样式

export default ScrollToTopButton;
